<template>
	<view class="coupon-container">
		
		<!-- 兑换框 -->
		<view class="exchange-box">
			<view class="exchange-input-wrapper">
				<u-input
					v-model="exchangeCode"
					placeholder="请输入优惠码"
					:border="false"
					@input="onExchangeInput"
				></u-input>
			</view>
			<view 
				class="exchange-btn"
				:class="{ 'active': canExchange }"
				@click="exchangeCoupon"
			>
				兑换
			</view>
		</view>
		
		<!-- 顶部状态切换 -->
		<view class="status-tabs">
			<view 
				class="tab-item" 
				:class="{ active: currentStatus === 'unused' }"
				@click="switchStatus('unused')"
			>
				未使用
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentStatus === 'used' }"
				@click="switchStatus('used')"
			>
				已使用
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentStatus === 'expired' }"
				@click="switchStatus('expired')"
			>
				已过期
			</view>
		</view>

		
		<!-- 优惠券列表 -->
		<scroll-view 
			class="coupon-list" 
			scroll-y="true"
			@scrolltolower="loadMore"
		>
			<view 
				class="coupon-item"
				:class="{ 
					'used': currentStatus === 'used' || currentStatus === 'expired',
					'expired': currentStatus === 'expired'
				}"
				v-for="(item, index) in currentCoupons" 
				:key="index"
			>
				<!-- 优惠券上半部分 -->
				<view class="coupon-top">
					<view class="coupon-value">
						<text class="value-text">{{ item.value }}</text>
					</view>
					<view class="coupon-info">
						<view class="coupon-desc">{{ item.description }}</view>
						<view class="coupon-date">{{ item.validity }}</view>
						<view 
							class="use-btn"
							v-if="currentStatus === 'unused'"
							@click="useCoupon(item)"
						>
							立即使用
						</view>
					</view>
				</view>
				
				<!-- 优惠券下半部分 -->
				<view 
					class="coupon-bottom"
					@click="toggleExpand(index)"
				>
					<view class="usage-details">
						<text v-if="!item.isExpanded">全场通用:限时购、特价等优惠商品及详情页标注...</text>
						<text v-else>全场通用:限时购、特价等优惠商品及详情页标注不可用券的商品除外。</text>
					</view>
					<view class="chevron-icon">
						<u-icon 
							:name="item.isExpanded ? 'arrow-up' : 'arrow-down'" 
							size="12" 
							color="#999"
						></u-icon>
					</view>
				</view>
				
				<!-- 水印覆盖层 -->
				<view 
					class="watermark-overlay"
					v-if="currentStatus === 'used' || currentStatus === 'expired'"
				>
					<view class="watermark-text">
						{{ currentStatus === 'used' ? '已使用' : '已过期' }}
					</view>
				</view>
			</view>
			
			<!-- 底部提示 -->
			<view class="bottom-tip">
				已经到底了
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStatus: 'unused', // 当前状态：unused-未使用, used-已使用, expired-已过期
				exchangeCode: '', // 兑换码
				validExchangeCodes: ['宋向洲', '亢哲', '杨芳柯', '杨紫茗', '舒文雅', '焦冲', '辛昊坤', '来点灵感'], // 有效的兑换码
				unusedCoupons: [
					{
						value: '100元',
						description: '100元直减券',
						validity: '2018.06.02-2018.06.20',
						isExpanded: true // 第一个默认展开
					},
					{
						value: '8折',
						description: '8折券',
						validity: '2018.06.02-2018.06.20',
						isExpanded: false
					},
					{
						value: '80元',
						description: '每满300元减80元',
						validity: '2018.06.02-2018.06.20',
						isExpanded: false
					},
					{
						value: '200元',
						description: '满1000元可用',
						validity: '2018.06.02-2018.06.20',
						isExpanded: false
					},
					{
						value: '9折',
						description: '9折券',
						validity: '2018.06.02-2018.06.20',
						isExpanded: false
					},
					{
						value: '100元',
						description: '每满300元减100元',
						validity: '2018.06.02-2018.06.20',
						isExpanded: false
					}
				],
				usedCoupons: [
					{
						value: '50元',
						description: '50元直减券',
						validity: '2018.05.01-2018.05.15',
						isExpanded: false
					},
					{
						value: '9折',
						description: '9折券',
						validity: '2018.05.01-2018.05.15',
						isExpanded: false
					},
					{
						value: '30元',
						description: '每满200元减30元',
						validity: '2018.05.01-2018.05.15',
						isExpanded: false
					}
				],
				expiredCoupons: [
					{
						value: '20元',
						description: '20元直减券',
						validity: '2018.04.01-2018.04.15',
						isExpanded: false
					},
					{
						value: '95折',
						description: '95折券',
						validity: '2018.04.01-2018.04.15',
						isExpanded: false
					},
					{
						value: '10元',
						description: '每满100元减10元',
						validity: '2018.04.01-2018.04.15',
						isExpanded: false
					}
				]
			}
		},
		computed: {
			currentCoupons() {
				switch(this.currentStatus) {
					case 'unused':
						return this.unusedCoupons;
					case 'used':
						return this.usedCoupons;
					case 'expired':
						return this.expiredCoupons;
					default:
						return this.unusedCoupons;
				}
			},
			
			// 是否可以兑换
			canExchange() {
				return this.exchangeCode.trim().length > 0;
			}
		},
		methods: {
			// 切换状态
			switchStatus(status) {
				this.currentStatus = status;
			},
			
			// 兑换码输入处理
			onExchangeInput(value) {
				this.exchangeCode = value;
			},
			
			// 兑换优惠券
			exchangeCoupon() {
				if (!this.canExchange) return;
				
				const code = this.exchangeCode.trim();
				if (this.validExchangeCodes.includes(code)) {
					// 添加大额优惠券
					const newCoupon = {
						value: '500元',
						description: '大额优惠券',
						validity: '2018.06.02-2018.06.20',
						isExpanded: false
					};
					
					this.unusedCoupons.unshift(newCoupon);
					this.exchangeCode = '';
					
					uni.showToast({
						title: '兑换成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '兑换码无效',
						icon: 'none'
					});
				}
			},
			
			// 使用优惠券
			useCoupon(coupon) {
				if (this.currentStatus === 'unused') {
					uni.showToast({
						title: '优惠券使用成功',
						icon: 'success'
					});
					// 这里可以添加使用优惠券的逻辑
				}
			},
			
			// 切换展开/收起
			toggleExpand(index) {
				this.currentCoupons[index].isExpanded = !this.currentCoupons[index].isExpanded;
			},
			
			// 加载更多
			loadMore() {
				// 这里可以添加加载更多优惠券的逻辑
				console.log('加载更多优惠券');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
	}
	
	// 顶部状态切换
	.status-tabs {
		display: flex;
		background-color: #fff;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		position: sticky;
		top: 0;
		z-index: 10;
		
		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			position: relative;
			padding: 20rpx 0;
			
			&.active {
				color: #ff6b35;
				font-weight: bold;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 4rpx;
					background-color: #ff6b35;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	// 兑换框
	.exchange-box {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		border-bottom: 1rpx solid #eee;
		
		.exchange-input-wrapper {
			flex: 1;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			padding: 0 20rpx;
		}
		
		.exchange-btn {
			padding: 15rpx 30rpx;
			background-color: #ccc;
			color: #999;
			border-radius: 8rpx;
			font-size: 26rpx;
			
			&.active {
				background-color: #ff6b35;
				color: #fff;
			}
		}
	}
	
	// 优惠券列表
	.coupon-list {
		height: calc(100vh - 200rpx);
		padding: 20rpx;
	}
	
	// 优惠券卡片
	.coupon-item {
		background: linear-gradient(135deg, #ff9a8b 0%, #ff6b35 100%);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);
		position: relative;
		
		// 已使用状态
		&.used {
			background: linear-gradient(135deg, #ccc 0%, #999 100%);
			box-shadow: 0 4rpx 12rpx rgba(153, 153, 153, 0.2);
		}
		
		// 已过期状态
		&.expired {
			background: linear-gradient(135deg, #ddd 0%, #bbb 100%);
			box-shadow: 0 4rpx 12rpx rgba(187, 187, 187, 0.2);
		}
	}
	
	// 优惠券上半部分
	.coupon-top {
		display: flex;
		padding: 30rpx;
		align-items: center;
		
		.coupon-value {
			flex: 0 0 200rpx;
			
			.value-text {
				font-size: 48rpx;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
			}
		}
		
		.coupon-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 120rpx;
			
			.coupon-desc {
				font-size: 28rpx;
				color: #fff;
				font-weight: 500;
			}
			
			.coupon-date {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
			
			.use-btn {
				align-self: flex-end;
				background-color: rgba(255, 255, 255, 0.9);
				color: #ff6b35;
				font-size: 24rpx;
				padding: 12rpx 24rpx;
				border-radius: 20rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.3);
			}
		}
	}
	
	// 优惠券下半部分
	.coupon-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-top: 2rpx dashed rgba(255, 255, 255, 0.3);
		background-color: rgba(255, 255, 255, 0.1);
		cursor: pointer;
		
		.usage-details {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
			flex: 1;
		}
		
		.chevron-icon {
			margin-left: 20rpx;
		}
	}
	
	// 水印覆盖层
	// 水印覆盖层
.watermark-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
	display: flex;
	align-items: center;
	justify-content: flex-end; // 从 center 改为靠右
	padding-right: 40rpx; // 给点右边内边距，避免贴边太近
	pointer-events: none;

	.watermark-text {
		transform: rotate(-45deg);
		font-size: 48rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.3);
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
		letter-spacing: 8rpx;
		white-space: nowrap; // 防止换行
	}
}

	
	// 底部提示
	.bottom-tip {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		padding: 40rpx 0;
	}
	
	// 已使用和已过期状态的样式调整
	.coupon-item.used,
	.coupon-item.expired {
		.coupon-top .coupon-value .value-text {
			color: #fff;
			opacity: 0.8;
		}
		
		.coupon-top .coupon-info .coupon-desc,
		.coupon-top .coupon-info .coupon-date {
			opacity: 0.8;
		}
		
		.coupon-bottom .usage-details {
			opacity: 0.7;
		}
	}
</style>
